<template>
    <van-nav-bar title="歌单广场" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tabs v-model:active="active" @click="getBoutiqueList(hotlist[active].name)">
        <van-tab v-for="item in hotlist" :title="item.name">
            <div class='imgesbox'>
                <div v-for="item in boutique_song" class="box"  @click="songdetail(item.id)" v-lazy-container="{ selector: 'img'}">
                        <img :data-src="item.coverImgUrl">
                        <div>{{ item.name }}</div>
                </div>
            </div>
        </van-tab>
    </van-tabs>
</template>

<script setup>

import { singlesList, boutiqueList } from '../../api/music_style'
import { ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'

let hotlist = ref()
let boutique_song = ref()
const router = useRouter()
const active = ref(0);
const onClickLeft = () => history.back();
onBeforeMount(() => {
    getmicstyledata()
})
const getmicstyledata = async () => {
    let data = await singlesList()
    hotlist.value = data.tags
    hotlist.value.length = 5
    getBoutiqueList(hotlist.value[0].name)
}
const getBoutiqueList = async (tags) => {
    let data = await boutiqueList(tags)
    boutique_song.value = data.playlists
}

const songdetail = async (id)=>{
    router.push({
        path: '/sheetdetail',
        query:{
            ids:id
        }
    })
}
</script>
 
<style scoped>
.imgesbox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around
}
.box{
    width: 100px;
    font-size: 10px;
    line-height: 20px;
    margin: 10px;
}
img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}
</style>